<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选框的全选和全不选练习</title>
  <script>
    /**
     * 获取元素的父节点和兄弟节点
     *     通过具体的元素节点调用
    */
    window.onload = function(){ 
      // 获取所有多选框
      var items = document.getElementsByName("items");

      // 获取顶部的全选/全不选复选框
      var topSelect = document.getElementById("topSelect");
      topSelect.onclick = function(){
        for(var i=0;i<items.length;i++){
          // 多选框的状态和顶部全选框的状态一致
          items[i].checked = topSelect.checked;
        }
      }

      // 获取全选按钮
      var selectAll = document.getElementById("selectAllBtn");
      // 点击全选按钮设置全选
      selectAll.onclick = function(){
        // 同时设置顶部的全选框选中
        topSelect.checked = true;
        for(var i=0;i<items.length;i++){
          // 设置多选框为选中状态
          items[i].checked = true;
        }
      }

      // 获取全不选按钮
      var notSelectBtn = document.getElementById("notSelectBtn");
      notSelectBtn.onclick = function(){
        // 同时设置顶部的全选框不选中
        topSelect.checked = false;
        for(var i=0;i<items.length;i++){
          // 设置多选框为不选中状态
          items[i].checked = false;
        }
      }
      // 获取反选按钮
      var selectRevBtn = document.getElementById("selectRevBtn");
      selectRevBtn.onclick = function(){
        var num = 0;
        // 设置反选
        for(var i=0;i<items.length;i++){
          items[i].checked = !items[i].checked;
          if(items[i].checked) num++;
        }
        // 反选后，若全不选中或全选中，则要设置顶部的全选按钮
        if(num == items.length){
          topSelect.checked = true;
        }else{
          topSelect.checked = false;
        }
      }
      // 获取提交
      var subBtn = document.getElementById("subBtn");
      subBtn.onclick = function(){
        // 将选中的提交
        for(var i=0;i<items.length;i++){
          if(items[i].checked){
            alert(items[i].value);
          }
        }
      }
      // 根据多选框的状态修改全选/全不选的状态
      for(var i=0;i<items.length;i++){
          items[i].onclick = function(){
            var selectNum = 0;
            for(var j=0;j<items.length;j++){
              if(items[j].checked){
                selectNum++;
              }
            }
            if(selectNum == items.length){
              topSelect.checked = true;
            }else{
              topSelect.checked = false;
            }
          }
        }
    
    }
  </script>
</head>
<body >
    <form action="" method="get">
      兴趣爱好：<input type="checkbox" name="" id="topSelect">全选/全不选
        <br>
        <input type="checkbox" name="items" value="lq">篮球
        <input type="checkbox" name="items" value="pq">排球
        <input type="checkbox" name="items" value="zq">足球
        <input type="checkbox" name="items" value="ymq">羽毛球
        <br>
        <input type="button" id="selectAllBtn" value="全选">
        <input type="button" id="notSelectBtn" value="全不选">
        <input type="button" id = "selectRevBtn" value="反选">
        <input type="button" id="subBtn" value="提交">


    </form>
</body>
</html>